<template>
  <div class="home">
    <div class="home_1"></div>
    <div class="home_2"></div>
    <div class="home_3">
      <div class="btn_go" @click="login"></div>
      <div class="btn_rule" @click="ruleShow = true">活动规则</div>
      <p>活动Demo，仅用学习</p>
    </div>
    <Rule v-if="ruleShow"></Rule>
  </div>
</template>

<script>
import Rule from "../components/Rule.vue";
export default {
  name: "home",
  metaInfo: {
    title: "学习案例",
    meta: [
      {
        name: "Author",
        content: "wangzhian_gz liuyamin_bj",
      },
      {
        name: "address",
        content: "zt/project/2020/202012/20201212-daz",
      },
    ],
  },

  components: {
    Rule,
  },

  data() {
    return {
      loading: {}, //加载中
      ruleShow: false,
      isarea: -1, // -1:获取不到定位；0：不在活动地区；1：在
      not: false,
    };
  },

  methods: {
    login() {
      // 返回该页面后再次点击参与按钮 且 有活动地区限制
      if (this.isarea !== 1 && this.$CONF.areaArr.length !== 0) {
        this.isArea(-1);
        return;
      }
      this.$router.push("sult");
      return;

      const shareId = this.$TOOL.getSearchData().shareId || "",
        loginUrl = `https://pangku.com/alilogin?atid=${this.$CONF.atid}&callback=`,
        parms = `shareId=${shareId}&type=1`,
        callback =
          `${loginUrl}` +
          encodeURIComponent(`${this.$CONF.baseUrl}ali/oauthAli_callback.jsp?${parms}`),
        url = `${loginUrl}${callback}`;

      location.href = url;
    },

    isArea(flag) {
      if (this.$CONF.areaArr.length === 0) return;
      // 如果活动不需要限制地区以下js终止执行
      this.loading = this.$toast.loading({
        message: "加载中...",
        duration: 0, // 无限时长loading
      });
      this.$TOOL
        .location()
        .then((res) => {
          this.loading.clear();

          let locationArr = [],
            isHave = false;
          locationArr.push(this.$TOOL.formatArea(res.pro));
          locationArr.push(this.$TOOL.formatArea(res.city));
          locationArr.map((item) => {
            this.$CONF.areaArr.indexOf(item) > -1 && (isHave = true);
          });
          if (isHave) {
            this.isarea = 1;
            flag === -1 && this.login();
          } else {
            this.isarea = 0;
            this.$toast({
              message: "抱歉，您不在活动地区",
              onClose: () => {
                this.goOther();
                return;
              },
            });
          }
        })
        .catch((msg) => {
          this.loading.clear();
          // 未开启定位
          this.$toast({
            message: msg.message,
            onClose: () => {
              this.goOther();
            },
          });
        });
    },

    // 不在活动地区处理
    goOther() {
      return;
      AlipayJSBridge.call("pushWindow", {
        url: this.$CONF.other,
      });
    },

    wxShare() {
      const shareId = this.$TOOL.getSearchData().shareId || "";
      wxApi.init(function () {
        let shareData = {
          title: "牛年，就开牛头标！",
          desc:
            "COROLLA卡罗拉家族邀你一起共度2021幸福年！点击参与集福卡活动，即有机会获取家族团圆奖、新车锦鲤奖等精彩好礼！",
          link: `https://www1.pcauto.com.cn/zt/gz20210120/byd/zfb/index.html?shareId=${shareId}`,
          imgUrl: "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/images/logo.jpg",
          success: function () {
            //分享成功的回调
          },
        };
        wx.onMenuShareAppMessage(shareData); // 分享给朋友
        wx.onMenuShareTimeline(shareData); // 分享到朋友圈
        wx.onMenuShareQQ(shareData); // 分享到QQ
        wx.onMenuShareWeibo(shareData); // 分享到微博
      });
    },

    // 预加载未出现的图片
    loadImg: function () {
      let imgArr = [
        "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/static/img/pop_rule.png",
        "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/static/img/type1_1.jpg",
        "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/static/img/type1_2.jpg",
      ];
      imgArr.forEach(function (e) {
        let loadImg = new Image();
        loadImg.src = e;
      });
    },
  },

  mounted() {
    console.log(`是否需要活动地区限制:${this.$CONF.areaArr.length > 0}`);
    let _this = this;
    setTimeout(() => {
      _this.loadImg();
    }, 2000);
    // 是支付宝才进行定位处理
      this.isArea();
      this.wxShare();
    // if (window.AlipayJSBridge) {
    // } else {
    //   this.$toast({ message: "请用支付宝扫码打开" });
    // }
  },
};
</script>

<style lang="scss">
.home {
  .home_1 {
    height: 4.26rem;
    background: url(../assets/images/home_1.jpg) no-repeat center top / cover;
  }
  .home_2 {
    height: 3.75rem;
    background: url(../assets/images/home_2.jpg) no-repeat center top / cover;
    margin-top: -1px;
  }
  .home_3 {
    height: 6.98rem;
    background: url(../assets/images/home_3.jpg) no-repeat center top / cover;
    position: relative;
    margin-top: -1px;
    .btn_go {
      width: 5.5rem;
      height: 1.16rem;
      position: absolute;
      left: 50%;
      top: 2.15rem;
      transform: translateX(-50%);
    }
    .btn_rule {
      width: 1.25rem;
      height: 0.41rem;
      position: absolute;
      font-size: 0.28rem;
      line-height: 1.8;
      left: 50%;
      top: 3.66rem;
      color: #333;
      text-align: center;
      letter-spacing: 1px;
      border-bottom: 1px solid #333;
      transform: translateX(-50%);
    }
    p {
      width: 100%;
      text-align: center;
      font-size: 0.28rem;
      position: absolute;
      top:4.5rem;
    }
  }
}
</style>
